import React from 'react';
import { Layout, Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  DashboardOutlined,
  ToolOutlined,
  SettingOutlined,
  TeamOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { useAppContext, useAuth } from '../contexts/AppContext';

const { Sider } = Layout;

const Sidebar: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { state, toggleSidebar } = useAppContext();
  const { isAdmin } = useAuth();

  // 菜单项配置
  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: '仪表板',
    },
    {
      key: '/tools',
      icon: <ToolOutlined />,
      label: '工具管理',
    },
    {
      key: '/configs',
      icon: <SettingOutlined />,
      label: '配置管理',
    },
    ...(isAdmin ? [{
      key: '/users',
      icon: <TeamOutlined />,
      label: '用户管理',
    }] : []),
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  // 获取当前选中的菜单项
  const selectedKeys = [location.pathname];
  const openKeys = selectedKeys.map(key => key.split('/')[1]).filter(Boolean);

  return (
    <Sider
      trigger={null}
      collapsible
      collapsed={state.sidebarCollapsed}
      width={200}
      style={{
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
        zIndex: 100,
        boxShadow: '2px 0 8px rgba(0,0,0,0.1)',
      }}
      theme="dark"
    >
      {/* Logo区域 */}
      <div style={{ 
        height: '64px', 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        color: '#fff',
        fontSize: '18px',
        fontWeight: 'bold',
        borderBottom: '1px solid #1f1f1f',
      }}>
        {state.sidebarCollapsed ? 'DCG' : 'DCarpai Guider'}
      </div>

      {/* 菜单 */}
      <Menu
        theme="dark"
        mode="inline"
        selectedKeys={selectedKeys}
        openKeys={state.sidebarCollapsed ? [] : openKeys}
        items={menuItems}
        onClick={handleMenuClick}
        style={{ 
          borderRight: 0,
          paddingTop: '16px',
        }}
      />

      {/* 折叠按钮 */}
      <div
        style={{
          position: 'absolute',
          bottom: '16px',
          left: '50%',
          transform: 'translateX(-50%)',
          cursor: 'pointer',
          color: '#fff',
          fontSize: '16px',
          padding: '8px',
          borderRadius: '4px',
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
          transition: 'background-color 0.3s',
        }}
        onClick={toggleSidebar}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
        }}
      >
        {state.sidebarCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </div>
    </Sider>
  );
};

export default Sidebar;
